<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="user_card">
                    <div class="user_info">
                        <img src="./header-icon.jpg" alt="">
                        <div class="user_info_msg">
                            <div class="user_info_name">
                                sunhao
                            </div>
                            <div class="user_info_role">
                                超级管理员
                            </div>
                        </div>
                    </div>
                    <div class="login_msg">
                        <div class="login_time">
                            上次登录时间：2018-7-17
                        </div>
                        <div class="login_area">
                            上次登录地点：成都
                        </div>
                    </div>
                </div>
                <div class="user_skill">
                    <div class="title">掌握技能</div>
                    <div class="user_skill_info">
                        HTML
                        <el-progress :percentage="90"></el-progress>
                        CSS 
                        <el-progress :percentage="80" color="#8e71c7"></el-progress>
                        JAVASCRIPT 
                        <el-progress :percentage="70" color="green"></el-progress>
                        VUE 
                        <el-progress :percentage="60" color="red"></el-progress>
                        GIT
                        <el-progress :percentage="50" color="#ccc"></el-progress>
                        WEBPACK,GIT
                        <el-progress :percentage="40" color="#666"></el-progress>
                        PHP
                         <el-progress :percentage="30" color="yellow"></el-progress>
                    </div>
                </div>
            </el-col>
            <el-col :span="16">
               <el-row :gutter="20">
                   <el-col :span="8">
                        <div class="icon-data">
                           <div class="icon">
                               <i class="icon_1 el-icon-view"></i>
                           </div>
                           <div class="data">
                               <div class="num num_1">9999+</div>
                               <div class="title">用户访问量</div>
                           </div>
                        </div>
                   </el-col>
                   <el-col :span="8">
                         <div class="icon-data">
                           <div class="icon">
                               <i class="icon_2 el-icon-document"></i>
                           </div>
                           <div class="data">
                               <div class="num num_2">9999+</div>
                               <div class="title">完成任务</div>
                           </div>
                        </div>
                   </el-col>
                   <el-col :span="8">
                         <div class="icon-data">
                           <div class="icon">
                               <i class="icon_3 el-icon-message"></i>
                           </div>
                           <div class="data">
                               <div class="num num_3">9999+</div>
                               <div class="title">系统消息</div>
                           </div>
                        </div>
                   </el-col>
               </el-row>
               <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span >任务列表</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">添加</el-button>
                    </div>
                    <el-table :data="todoList" :show-header="false" height="500" style="width: 100%;font-size:14px;">
                        <el-table-column width="40">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.status"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <div class="todo-item" :class="{'todo-item-del': scope.row.status}">{{scope.row.title}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column width="60">
                            <template slot-scope="scope">
                                <i class="el-icon-edit" @click="update(scope.$index)"></i>
                                <i class="el-icon-delete" @click="deleteTask(scope.$index)"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
        <!-- 添加 -->
        <el-dialog
            title="添加任务"
            :visible.sync="dialogVisible"
            width="30%">
            <span>
                <el-input v-model="taskVal" placeholder="请输入内容" id="taskVal"></el-input>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editDo">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改 -->
         <el-dialog
            title="修改任务"
            :visible.sync="dialogUpdate"
            width="30%">
            <span>
                <el-input v-model="updataTask" placeholder="请输入内容" id="taskVal"></el-input>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdate = false">取 消</el-button>
                <el-button type="primary" @click="toUpdate()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name:'Index',
        data(){
            return{
                checked:'true',
                dialogVisible: false,
                dialogUpdate:false,
                updateIndex:'',
                taskVal:'',
                updataTask:'',
                todoList: [
                    {
                        title: 'IOS分包增加设置官方渠道,解决正在出包问题',
                        status: false,
                    },
                    {
                        title: '渠道下增加联运渠道管理功能,可以搜索渠道,添加/编辑渠道,重置密码',
                        status: false,
                    },
                    {
                        title: '游戏返利充值列表增加玩家账号搜索',
                        status: false,
                    }, {
                        title: '渠道下增加联运渠道管理功能,可以搜索渠道,添加/编辑渠道,重置密码',
                        status: false,
                    },
                    {
                        title: '资料包html页面展示版本福利及VIP价格表',
                        status: true,
                    },
                    {
                        title: 'PS推广列表增加点位搜索及资料包展示页面优化',
                        status: true,
                    }
                ]
            }
        },
       methods: {
            editDo() {
                let task={
                    checkStatus:'false',
                    title:this.taskVal
                }
                this.todoList.unshift(task);
                this.dialogVisible = false;
            },
            deleteTask(index){
                this.$confirm('确认删除此条任务？')
                .then(_ => {
                     this.todoList.splice(index,1);
                })
                .catch(_ => {});  
            },
            update(val){
              let task=this.todoList[val].title;
               this.updataTask=task;
               this.updateIndex=val;
               this.dialogUpdate=true;
            },
            toUpdate(){
                this.todoList[this.updateIndex].title=this.updataTask;
                this.dialogUpdate=false;
            }
       }
    }
</script>

<style scoped lang="scss">
    .user_card{
        padding:20px;
        background:#fff;
        overflow:hidden;
        .user_info{
            padding:20px;
            display:flex;
            align-items: center;
            border-bottom:2px solid #ddd;
            img{
                width:120px;
                height:120px;
                margin-right:50px;
                border-radius:50%;
            }
            .user_info_msg{
                flex:1;
                text-align:left;
                flex-direction: column;
                .user_info_name{
                    font-size:30px;
                    line-height:30px;
                }
                .user_info_role{
                    margin-top:10px;
                    font-size:18px;
                    color:#999;
                    line-height:24px;
                }
            }
        }
        .login_msg{
            margin-top:20px;
            text-align:left;
            line-height:26px;
            color:#999;
        }
    }
    .user_skill{
        margin-top:30px;
        text-align:left;
        padding:20px;
        overflow:hidden;
        background:#fff;
        .title{
            text-align:center;
            font-size:22px;
        }
    }
    .icon-data{
        display:flex;
        background:#fff;
        .icon{
            i{
                width:100px;
                height:100px;
                color:#fff;
                font-size:30px;
                line-height:100px;
            }
            .icon_1{
                background:green;
            }
            .icon_2{
                background:#ccc;
            }
            .icon_3{
                background:pink;
            }
        }
        .data{
            flex:1;
            display:flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            .num_1{
                font-size:26px;
                color:green;
            }
            .num_2{
                font-size:26px;
                color:#ccc;
            }
            .num_3{
                font-size:26px;
                color:pink;
            }
        }
    }
    .box-card{
        margin-top:30px;
        text-align:left;
    }
    .todo-item-del{
        text-decoration: line-through;
        color:#ddd;
    }
</style>